<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>购物车小案例</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

  }

  .login {
    width: 500px;
    height: 400px;
    border: 1px solid #ccc;
    margin: 100px auto;
  }

  .title {
    text-align: center;
    font-size: 2em;
    padding: 15px 0 30px 0;
  }

  .login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .input-group label {
    font-size: 1.2em;
    margin-right: 8px;
  }

  .input-group {
    margin: 15px;
    position: relative;
  }

  .input-group input {
    width: 350px;
    height: 45px;
    padding-left: 8px;
  }

  footer {
    margin-top: 10px;
  }

  button {
    width: 120px;
    line-height: 30px;
  }

  .loginbtn{
    width: 120px;
    line-height: 30px;
    margin-left: 10px;

  }

  .reset {
    display: none;
  }
  .eyes{
    display: inline-block;
    width: 24px;
    height: 21px;
    position: absolute;
    right: 9px;
    top: 13px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    line-height: 21px;
  }
</style>

<body>
  <div class="login">
    <div class="title">Login</div>
    <form class="login-form">
      <div class="input-group">
        <label for="account">账号:</label>
        <input type="text" id="account" value="" name="" placeholder="请输入用户名">
      </div>
      <div class="input-group">
        <label for="password">密码:</label>
        <input type="password" id="password" value="" name="" placeholder="请输入密码">
        <span class="eyes">*</span>
      </div>
      <footer>
        <button class="loginbtn">登录</button>
        <button class="register">注册</button>
        <button type="reset" class="reset"></button>
      </footer>
    </form>
  </div>


  </div>
 <script src="utils.js"></script>
  <script>
  
    window.addEventListener('load', function () {
      // 记录表单的值
      const form = {}
      document.querySelector('.login-form').addEventListener('submit', function (e) {
        // 禁止默认提交事件
        e.preventDefault()
      })
      document.querySelector('.loginbtn').addEventListener('click', function () {
        // 获取表单信息
        getFormEl()
         // 前端判空
        if(!isEmpty(form)){
          alert("用户名或密码不能为空")
          return
        }
        // 调取登录方法
        const user = new User( )
        user.login(form)
        reset()

      })
      document.querySelector('.register').addEventListener('click', function () {
        // 获取表单信息
        getFormEl()
        // 前端判空
        if(!isEmpty(form)){
          alert("用户名或密码不能为空")
          return
        }
        // 用户名检测
        if (!isExist(form.account)) {
          const user = new User(form)
          // 保存当前用户进数组
          addStore(user)
          reset()

        } else {
          alert("账号已经存在了")
          // 小技巧 利用 手动触发表单的清空事件
          reset()
        }
      })
     document.querySelector(".eyes").addEventListener('click',function(){
      const passwordEl =  document.querySelector("#password")
 
      if(passwordEl.type==='password'){
        passwordEl.type='text'
      }else{
        passwordEl.type='password'
      }
      
     })
      // 工具封装
      function getFormEl() {
        form.account = document.getElementById('account').value
        form.password = document.getElementById('password').value
      }
      function reset(){
        document.querySelector('button[type=reset]').click()
      }
      function isEmpty(object){
        let flag = true
        for (const key in object) {
           if (Object.hasOwnProperty.call(object, key)) {
             const element = object[key];
             if(element.trim()===''||!element){
               flag = false
             }
           }
         } 
         return flag
      }
    })
  </script>
</body>

</html>